<template><div><h1 id="一-过度" tabindex="-1"><a class="header-anchor" href="#一-过度" aria-hidden="true">#</a> 一.过度</h1>
<p>transition 在英文中是过渡的意思，过渡可以为一个元素在不同状态之间切换不同的过渡效果。它由四个部分构
成，分别是：过渡属性的名称，过渡需要的时间，过渡的方式和过渡的延迟时间。</p>
<h2 id="_1-过渡属性的名称" tabindex="-1"><a class="header-anchor" href="#_1-过渡属性的名称" aria-hidden="true">#</a> 1.过渡属性的名称</h2>
<ul>
<li>
<p>transition-property 过渡样式</p>
<p>过渡一定是有变化都，在 <code v-pre>css</code> 中变化都是样式，比如我们需要过渡一个颜色，那么你要过渡的属性名称就是 background-color</p>
</li>
<li>
<p>当过渡多个样式的时候可以写 all</p>
</li>
</ul>
<h2 id="_2-过渡需要的时间" tabindex="-1"><a class="header-anchor" href="#_2-过渡需要的时间" aria-hidden="true">#</a> 2.过渡需要的时间</h2>
<ul>
<li>transition-duration 如果让过渡的感觉柔和一下，那就是需要过渡的时间不是一瞬间的而是慢慢的。</li>
<li>过渡的时间直接是以秒 s 或者 ms 为单位，默认 0s</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token comment">/* 过渡时间 */</span>
<span class="token property">transition-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">div:hover</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_3-过渡的方式" tabindex="-1"><a class="header-anchor" href="#_3-过渡的方式" aria-hidden="true">#</a> 3.过渡的方式</h2>
<ul>
<li>transition-timing-function 过渡方式,过渡方式的不同而在运动中改变速度</li>
<li>贝塞尔曲线函数是非常复杂 http://www.css3beziercurve.net/ 函数是非常复杂的，但是</li>
<li>在<code v-pre>css </code>中为我们封装了 5 种
<ul>
<li><strong>默认值，先慢再快最后慢</strong> transition-timing-function:ease;</li>
<li><strong>先慢，后越来越快</strong> transition-timing-function:ease-in;</li>
<li><strong>速度在开始和结束时都很慢,中间不加速</strong> transition-timing-function:ease-in-out;</li>
<li><strong>先快，后越来越慢</strong> transition-timing-function:ease-out;</li>
<li><strong>匀速</strong> transition-timing-function:linear;</li>
</ul>
</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token property">transition-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
<span class="token comment">/*默认值，先慢再快最后慢*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> ease<span class="token punctuation">;</span>
<span class="token comment">/*先慢，后越来越快*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> ease-in<span class="token punctuation">;</span>
<span class="token comment">/*速度在开始和结束时都很慢,中间不加速*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> ease-in-out<span class="token punctuation">;</span>
<span class="token comment">/*先快，后越来越慢*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> ease-out<span class="token punctuation">;</span>
<span class="token comment">/*匀速*/</span>
<span class="token property">transition-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body:hover div</span> <span class="token punctuation">{</span>
<span class="token property">left</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-过渡的延迟时间" tabindex="-1"><a class="header-anchor" href="#_4-过渡的延迟时间" aria-hidden="true">#</a> 4.过渡的延迟时间</h2>
<ul>
<li>过渡的延迟时间 transition-delay 在过渡效果开始作用之前需要等待的时间，值以秒（s）或毫秒（ms）为单位。</li>
<li>取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。</li>
</ul>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">transition-property</span><span class="token punctuation">:</span> all<span class="token punctuation">;</span>
    <span class="token property">transition-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
    <span class="token property">transition-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
    <span class="token comment">/*延迟2s再过渡*/</span>
    <span class="token property">transition-delay</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body:hover div</span> <span class="token punctuation">{</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_5-简化写法" tabindex="-1"><a class="header-anchor" href="#_5-简化写法" aria-hidden="true">#</a> 5.简化写法</h2>
<ul>
<li>顺序是 transition：过渡时间 延迟时间 过渡方式 过渡样式</li>
<li>注意“执行时间和延迟时间的顺序”不能改变</li>
<li>最简写法：transition：过渡时间；</li>
</ul>
<p><code v-pre>CSS3</code> 过渡动画模板、<code v-pre>CSS3 </code>Transition 动画模板 http://web.chacuo.net/css3transition</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token comment">/* 简写 执行时间 延迟时间 过渡方式 过渡属性*/</span>
	<span class="token property">transition</span><span class="token punctuation">:</span> 1s 2s linear all<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_6-多重样式过渡" tabindex="-1"><a class="header-anchor" href="#_6-多重样式过渡" aria-hidden="true">#</a> 6.多重样式过渡</h2>
<p>使用 transition 进行多个样式并且不同时过渡样式时，每一个不同时间的过渡样式需要用逗号分隔。</p>
<div class="language-css line-numbers-mode" data-ext="css"><pre v-pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token comment">/* 注意第二个的延迟时间 */</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 1s linear background-color<span class="token punctuation">,</span> 1s 1s left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body:hover div</span> <span class="token punctuation">{</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


